<template>
  <div class="statistical-3">
    <div class="col">
      <div class="col-title">2019-2022年引进急需紧缺人才情况汇总</div>
      <div class="row">
        <div class="chart" id="chart1"></div>
      </div>
      <div class="row">
        <div class="chart" id="chart2"></div>
      </div>
      <div class="row">
        <div class="chart" id="chart3"></div>
      </div>
    </div>
    <div class="col full">
      <div class="row map">
        <div class="number-block">
          <NumberItem class="number-item" v-for="item in numberData" :key="item.id" :name="item.name" :number="item.number" :color="item.color" :unit="item.unit" :icon="item.icon"></NumberItem>
        </div>
      </div>
      <div class="row" id="chart4">

      </div>
    </div>
    <div class="col" style="z-index: 999">
      <div class="col-title">2019-2022年引进急需紧缺人才<br>（研究生、本科生、市属国有企业）情况汇总</div>
      <div class="row full">
        <div class="chart" id="chart5"></div>
      </div>
      <div class="row full" id="icon-number">
        <div class="title">人才孵化数据</div>
        <IconNumber2 class="icon-number2" name="投入金额" value="1722万元" icon="/static/images/statistical3/icon1.png"></IconNumber2>
        <IconNumber2 class="icon-number2" name="入驻人才" value="516人" icon="/static/images/statistical3/icon2.png"></IconNumber2>
        <IconNumber2 class="icon-number2" name="人才项目" value="25个" icon="/static/images/statistical3/icon3.png"></IconNumber2>
        <IconNumber2 class="icon-number2" name="高端项目" value="9个" icon="/static/images/statistical3/icon4.png"></IconNumber2>
      </div>
    </div>
  </div>
</template>

<script>

import NumberItem from "@/components/NumberItem/NumberItem.vue";
import {getRandomNum} from "@/utils/utils";
import {getArrByKey, getPie3D2} from "@/utils/chart";
import IconNumber2 from "@/components/IconNumber2.vue";
import {getAgePie, getEducationTower, getIntroductionTalentsBar} from "@/api/statistical3";

export default {
  name: "Statistical3",
  components: {IconNumber2, NumberItem},
  data() {
    return {
      charts: {
        chart1: null,
        chart2: null,
        chart3: null,
        chart4: null,
        chart5: null,
      },
      numberData: [
        {
          id: 1,
          unit: '家',
          color: ['#5c6affb3', '#4a29d8b3'],
          name: '入驻企业总数',
          icon: 'icon-qiye',
          number: 368
        },
        {
          id: 2,
          unit: '亿元',
          color: ['#30cbf7b3', '#1997e1b3'],
          name: '创业企业产值',
          icon: 'icon-zijin',
          number: 36.5
        },
        {
          id: 3,
          unit: '人',
          color: ['#12f1b8b3', '#0db5e6b3'],
          name: '人才数量',
          icon: 'icon-rencaizhongxin',
          number: 491
        },
        {
          id: 4,
          unit: '家',
          color: ['#f7c759b3', '#fb838fb3'],
          name: '人才服务机构数',
          icon: 'icon-qiye',
          number: 112
        },
      ],
      pieData: [{
        name: '25岁以下', value: 60,
      }, {
        name: '25-35岁', value: 15,
      }, {
        name: '36岁以上', value: 25,
      }],
    }
  },
  methods: {
    async initChart1() {
      this.charts.chart1 = this.$echarts.init(document.getElementById('chart1'));
      this.charts.chart1.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = await getIntroductionTalentsBar();
      let maxValue = Math.max.apply(null, getArrByKey(data,'value'));
      maxValue = maxValue + maxValue * 0.2;
      let option = {
        title: {
          text: '各县市引进人才数',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '20%',
          containLabel: true
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 14}, formatter: (e) => {
              return e.length >= 4 ? e.slice(0, (e.length / 2)) + '\n' + e.slice(e.length / 2) : e;
            }
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: getArrByKey(data, 'name'),
        },
        yAxis: {
          name: '单位：万人',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          {
            data: getArrByKey(data, 'value'),
            name: '人数',
            type: 'pictorialBar',
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              rotate: 0,
              color: '#fff'
            },
            zlevel: 99,
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#07d0ca'
              },
              {
                offset: 1,
                color: 'rgba(0,107,183,0.63)'
              }
            ]),
            barWidth: 35,
            symbol: 'triangle',
          }, {
            data: getArrByKey(data, 'value').map(() => maxValue),
            type: 'bar',
            color: 'rgba(0,74,124,0.3)',
            barWidth: 35,
          }
        ]
      }
      this.charts.chart1.hideLoading();
      this.charts.chart1.setOption(option);
    },
    initChart2() {
      this.charts.chart2 = this.$echarts.init(document.getElementById('chart2'))
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      getAgePie().then(data=>{
        this.pieData=data;
        this.setLabel();
        let option = getPie3D2(this.pieData, 0.8, 200, 30, 20, 0.4)
        this.charts.chart2.setOption(option)
        option.series.push({
          backgroundColor: 'transparent',
          type: 'pie',
          name: 'pie2d',
          label: {
            opacity: 1,
            fontSize: 13,
            lineHeight: 20
          },
          startAngle: -40, // 起始角度，支持范围[0, 360]。
          clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
          radius: ['20%', '50%'],
          center: ['50%', '50%'],
          data: this.pieData,
          itemStyle: {
            opacity: 0  //这里必须是0，不然2d的图会覆盖在表面
          }
        })
        option.title = {
          text: '人才年龄占比',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        }
        this.charts.chart2.setOption(option)
      })
    },
    setLabel() {
      const color = ['#2b85f3', '#f0982a', '#38bbc3']
      this.pieData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index]
        }
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: [
              '{d|{d}%} {c|{c}人}',
              '{b|{b}}'
            ].join('\n'), // 用\n来换行
            rich: {
              d: {
                color: color[index],
                fontSize: 22
              },
              c: {
                color: '#fff',
                fontSize: 16
              },
              b: {
                color: '#999',
                fontSize: 16,
                align: 'left'
              }
            }
          }
        }
        item.labelLine = {
          normal: {
            lineStyle: {
              width: 1,
              color: 'rgba(255,255,255,0.7)'
            }
          }
        }
      })
    },
    async initChart3() {
      this.charts.chart3 = this.$echarts.init(document.getElementById('chart3'));
      this.charts.chart3.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let data = await getEducationTower()
      let option = {
        title: {
          text: '人才学历统计',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        legend: {
          data: getArrByKey(data,'name'),
          left: 'center',
          top: '55',
          textStyle: {
            color: '#fff'
          }
        },
        color: ['#37eff7', '#5595ec', '#ffd023'],
        series: [
          {
            name: '人数',
            type: 'funnel',
            left: '10%',
            width: '50%',
            height: '40%',
            top: '40%',
            sort: 'ascending',
            gap: 5,
            itemStyle: {
              borderWidth: 0,
            },
            label: {
              show: true,
              position: 'right',
              color: '#fff',
              formatter: '{b}：{c}人\n{d}%',
            },
            labelLine: {
              length: 60
            },
            data:data
          }
        ]
      }
      this.charts.chart3.hideLoading();
      this.charts.chart3.setOption(option);
    },
    initChart4() {
      this.charts.chart4 = this.$echarts.init(document.getElementById('chart4'));
      this.charts.chart4.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let xData = ['电子信息', '综合领域', '医药卫生', '能源', '材料', '机电', '纺织', '综合', '航空', '绿色化学', '生物医药', '其他'];

      let option = {
        title: {
          text: '人才技术领域',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '30%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff', fontSize: 12}},
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        yAxis: {
          type: 'value',
          name: '单位：人',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          {
            name: '人数',
            data: getRandomNum(12, 1000, 700),
            type: 'bar',
            barWidth:20,

            itemStyle:{
              borderWidth:1,
              borderColor:'#d7a630',
              color:new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#af882b'
                },
                {
                  offset: 1,
                  color: 'rgba(215,166,48,0.2)'
                }
              ])
            }
          },
        ]
      }
      this.charts.chart4.hideLoading();
      this.charts.chart4.setOption(option)
    },
    initChart5() {
      this.charts.chart5 = this.$echarts.init(document.getElementById('chart5'));
      this.charts.chart5.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        title: {
          text: '研究生、本科生、市属国有企业引进人才数',
          left: 'center',
          top: 15,
          textStyle: {
            color: '#fff',
            fontSize: 17,
            fontWeight: 'bold'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '30%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          left: 'center',
          top: '55',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          axisLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {
            show: true, textStyle: {color: '#fff', fontSize: 14},
          },
          axisTick: {show: false},
          splitLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          data: ['2019年', '2020年', '2021年', '2022年'],
        },
        yAxis: {
          name: '单位：人',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisLine: {show: false, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
          axisLabel: {show: true, textStyle: {color: '#fff',}},
          axisTick: {show: false},
          splitLine: {show: true, lineStyle: {color: 'rgba(255,255,255,0.1)'}},
        },
        series: [
          {
            data: getRandomNum(4, 300, 200),
            name: '研究生',
            type: 'pictorialBar',
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              rotate: 0,
              color: '#fff'
            },
            barGap: '60%',
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#0090d9'
              },
              {
                offset: 1,
                color: 'rgba(0,144,217,0.5)'
              }
            ]),
            barWidth: 15,
            symbol: 'roundRect',
          }, {
            barGap: '60%',
            data: getRandomNum(4, 300, 200),
            name: '本科生',
            type: 'pictorialBar',
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              rotate: 0,
              color: '#fff'
            },
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#31f1c2'
              },
              {
                offset: 1,
                color: 'rgba(49,241,194,0.5)'
              }
            ]),
            barWidth: 15,
            symbol: 'roundRect',
          }, {
            barGap: '60%',
            data: getRandomNum(4, 300, 200),
            name: '市属国有企业',
            type: 'pictorialBar',
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              rotate: 0,
              color: '#fff'
            },
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#e9c950'
              },
              {
                offset: 1,
                color: 'rgba(233,201,80,0.5)'
              }
            ]),
            barWidth: 15,
            symbol: 'roundRect',
          }
        ]
      }
      this.charts.chart5.hideLoading();
      this.charts.chart5.setOption(option);
    },
  },
  beforeDestroy() {
    this.$bus.$off('resize')
  },
  mounted() {
    this.initChart1()
    this.initChart2();
    this.initChart3();
    this.initChart4();
    this.initChart5();
    this.$bus.$on('resize', () => {
      this.$bus.$on('resize', () => {
        Object.keys(this.charts).forEach((key) => {
          this.charts[key] && this.charts[key].resize()
        })
      })
    })
  }
}
</script>

<style scoped lang="scss">
.statistical-3 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .col {
    height: 100%;
    width: calc(25% - 10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);

    .col-title {
      margin-top: 10px;
      text-align: center;
      line-height: 40px;
      width: 100%;
      color: #1cc0dc;
      font-weight: bold;
      font-size: 20px;
    }

    .row {
      width: 100%;
      border-radius: 10px;

      .chart {
        width: 100%;
        height: 100%;
      }
    }

    .row.full {
      height: calc((100% - 10px) / 3 * 2);
    }
  }

  .col.full {
    background: none;
    backdrop-filter: none;
    width: calc(50% - 20px);

    .row {
      height: calc((100% - 40px) / 3);
      background: rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(12px);
    }

    .row.map {
      height: 100px;
      margin-bottom:calc((100% - 10px) / 3 * 2 - 125px);
      background: none;
      backdrop-filter: none;

      .number-block {
        width: 100%;
        display: flex;
        flex-direction: row;
        height: 100px;

        .number-item {
          width: calc((100% - 75px) / 4);
          margin-right: 25px;
        }

        .number-item:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .col:first-child {
    .row {
      height: calc((100% - 50px) / 3);
    }
  }

  .col:last-child {
    .row {
      height: calc((100% - 90px) / 2);
    }
  }
  #icon-number{
    padding: 20px 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    .title {
      width: 100%;
      color: #fff;
      font-size: 17px;
      font-weight: bold;
      height: 40px;
      display: flex;
      justify-content: center;
    }
    .icon-number2{
      width: 50%;
      height: calc((100% - 100px)/2);
      margin-top: 20px;
    }
  }
}
</style>
